layui.use(['layer', 'form', 'admin', 'ax', 'upload'], function () {
    var $ = layui.jquery;
    var $ax = layui.ax;
    var form = layui.form;
    var admin = layui.admin;
    var layer = layui.layer;
    var upload = layui.upload;

    //初始化详情数据
    var ajax = new $ax(Feng.ctxPath + "/product/view/" + Feng.getUrlParam("productId"));
    var result = ajax.start();
    form.val('productUploadForm', result.data);


    //多图片上传
    var LOCAL = 0;
    var tableIndex = 0;
    //多文件列表示例
    $('#uploadListAction').attr("style", "display:none;")
    var demoListView = $('#uploadData'), uploadListIns = upload.render({
        elem: '#uploadList'
        , url: Feng.ctxPath + "/product/upload/" + LOCAL + "/" + result.data.id //改成您自己的上传接口
        , accept: 'images'
        , multiple: true
        , auto: false
        , bindAction: '#uploadListAction',
        data: {
            sort: function () {
                return 1;
            }
        },
        before: function (res) {
            console.log(res)
        }
        , choose: function (obj) {

            $('#uploadListAction').attr("style", "display:block;")
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
                tableIndex++;
                var tr = $(['<tr id="upload-' + index + '">'
                    , "<td>" + tableIndex + "</td>"
                    , '<td>' + file.name + '</td>'
                    , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                    , '<td>待上传</td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                    , '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));

                // //单个重传
                // tr.find('.demo-reload').on('click', function () {
                //     obj.upload(index, file);
                // });

                //删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    tableIndex--;
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                demoListView.append(tr);
                setTableIndex(
                );
            });

        }
        , done: function (res, index, upload) {
            console.log("上传成功" + JSON.stringify(res))
            if (res.data.fileSavePath) { //上传成功onclick='photoDelete("+JSON.stringify(res.data.fileId)+")'
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();

                tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(4).html('');
                tds.eq(4).html("<a href='" + res.data.fileSavePath + "' target='_blank'><image src='" + res.data.fileSavePath + "' style='width: 320px;height: 90px'></a>"+
                    // "<button type='button' class='layui-btn demoMore' id='test3' lay-data='{url:"+ '/product/photo/edit/'+LOCAL+'/'+result.data.id+'/'+tds.eq(0).val()+'/'+res.data.fileId+"}'><i class='layui-icon'></i>修改文件</button>"+
                    "<button type='button' onclick='photoDelete(" + JSON.stringify(res.data.fileId) + "," + JSON.stringify(index) +")' class='layui-btn layui-btn-xs layui-btn-danger demo-delete'>删除</button>"
                ); //清空操作
                $('#uploadListAction').attr("style", "display:none;")
                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }
            this.error(index, upload);
        }
        , error: function (index, upload) {
            var tr = demoListView.find('tr#upload-' + index)
                , tds = tr.children();
            tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
            // tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });


    if (result.data.fileInfos) {
        //隐藏上传
        $('#uploadListAction').attr("style", "display:none;")
        result.data.fileInfos.forEach(function (file, index) {
            //回显
            tableIndex = index + 1
            var tr = $(['<tr id="upload-' + tableIndex + '">'
                , '<td>' + tableIndex + '</td>'
                , '<td>' + file.fileName + '</td>'
                , '<td>' + file.fileSizeKb + 'kb</td>'
                , '<td><span style="color: #5FB878;">上传成功</span></td>'
                , '<td>'
                , "<button type='button' class='layui-btn' lay-data='{url:"+ '/product/photo/edit/'+LOCAL+'/'+result.data.id+'/'+tableIndex+'/'+file.fileId+"}'><i class='layui-icon'></i>修改文件</button>"
                , "<a href='" + file.filePath + "' target='_blank'><image src='" + file.filePath + "' style='width: 320px;height: 90px'></a><button type='button' onclick='photoDelete(" + JSON.stringify(file.fileId) + "," + JSON.stringify(tableIndex) +")' class='layui-btn layui-btn-xs layui-btn-danger demo-delete'>删除</button>"
                , '</td>'
                , '</tr>'].join(''));
            demoListView.append(tr);
        })
        setTableIndex();
    }
});

function setTableIndex() {
    var trs = $('#uploadData').find('tr');
    if (trs.length > 0) {
        for (var i = 0; i < trs.length; i++) {
            data = i + 1
            trs.eq(i).children().eq(0).html(i + 1);
            trs.eq(i).children().eq(0).val(i + 1);
        }
    }
};

function photoDelete(id, index) {
    //删除上传的文件
    var LOCAL = 0
    $.ajax({
        url: Feng.ctxPath + '/product/photo/delete/' + LOCAL + '/' + id,
        dataType: 'json',
        type: 'get',
        data: {},
        success: function (data) {
            if (data.success) {
                var tr = $('#uploadData').find('tr#upload-' + index)
                tr.remove();
                setTableIndex();
                Feng.success(data.data);
            } else {
                Feng.error(data.data);
            }

        }
    });
}

function photoEdit(fileId,productId, index) {

    //删除上传的文件
    var LOCAL = 0
    $.ajax({
        url: Feng.ctxPath + '/product/photo/edit/' + LOCAL + '/' +productId+ '/'  + '/'+index+ '/'+ fileId,
        dataType: 'json',
        type: 'get',
        data: {},
        success: function (res) {
            if (res.success) {
                var tr = $('#uploadData').find('tr#upload-' + index)
                tr.eq(0).html(index);
                tr.eq(1).html(res.data.fileName);
                tr.eq(2).html(res.data.fileSizeKb + 'kb');
                tr.eq(3).html('<span style="color: #5FB878;">修改成功</span>');
                tr.eq(4).html('');
                tr.eq(4).html("<a href='" + res.data.fileSavePath + "' target='_blank'><image src='" + res.data.fileSavePath + "' style='width: 320px;height: 90px'></a><button type='button' onclick='photoDelete(" + JSON.stringify(res.data.fileId) + "," + JSON.stringify(index) + ")' class='layui-btn layui-btn-xs layui-btn-danger demo-delete'>删除</button>"); //清空操作
                setTableIndex();
            } else {
                Feng.error(data.data);
            }

        }
    });
}